<template>
    <div class="content-container">
        <Title :icon="'bar-chart-box-ai-fill'" :title="'关键词排名'">
            <template #time>
                <svg-icon size="14px" icon-class="refresh-line" class="mr-5px"></svg-icon>更新于今天
            </template>
        </Title>
        <div class="pl-16px pr-16px h-500px">
            <Three v-model="activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
                <TabItem label="近7天" path="" :index="0">
                    <LineChart v-if="state.xAxis.length > 0" :xAxis="state.xAxis" :series="state.series" :index="0" />
                </TabItem>
                <TabItem label="近15天" path="" :index="1">
                    <LineChart v-if="state.xAxis.length > 0" :xAxis="state.xAxis" :series="state.series" :index="1" />
                </TabItem>
                <TabItem label="近30天" path="" :index="2">
                    <LineChart v-if="state.xAxis.length > 0" :xAxis="state.xAxis" :series="state.series" :index="2" />
                </TabItem>
            </Three>
        </div>
    </div>
</template>

<script setup lang="ts">
import Title from '@/views/shortVideo/components/Title.vue'
import Three from '@/components/Tab/Three.vue'
import TabItem from '@/components/Tab/Item.vue'
import LineChart from './LineChart.vue'
import { getKeywordRankApi } from '@/api/b2b'

const state = reactive({
    xAxis:[],
    series:[],
    day:0,
    data:[],
})

const activeIndex = ref(0)


function handleTabClick(val: any) {
    //每次切换的时候重置分页，重新获取数据
    const { index } = val
    activeIndex.value = index
    state.day = index
    state.xAxis = []
    state.series = []
    getKeywordRank()
}
async function getKeywordRank(){
    const res = await getKeywordRankApi({
        eq:state.day
    })
    if(res.code === 200){
        nextTick(() => {
            state.xAxis = res.data.LineChart_X
            state.series = res.data.series[0].data
        })
    }
}

onMounted(() => {
    getKeywordRank()
})
</script>

<style lang="scss">

</style>